<template>
  <div id="download_box">
    <div v-if="!close" class="download_masking"></div>
    <transition name="slide_fade">
      <div v-if="!close" :class="['advertise_download_dialog', platform === 'ios' ? 'block_ios' : '']">
        <button class="ad_icon_close" @click="handleClose"></button>
        <div class="app_container">
          <img class="ic_xiaokr" src="../../assets/img/icon.png" alt="小氪手游">
          <div class="app_desc">使用小氪手游APP下载</div>
          <div class="game_gift">{{ appName }}</div>
          <div class="btn_install" :data-clipboard-text="copyContent" @click="handleInstallApp(playIndex.app_down.app_down_url, $event, copyContent)">立即安装</div>
          <div v-show="platform === 'android'" class="install_guide">
            安装时如提示去手机应用市场安装 此时选择<span class="color_orange">“继续安装”</span>即可
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import Clipboard from 'clipboard'
import { buildUUID, getQueryItem, getPlatform } from '@/util'
import { mapGetters } from 'vuex'
export default {
  name: 'advertisement-dwonload',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    appId: {
      type: Number,
      default: 0
    },
    appName: {
      type: String,
      default: '小氪手游'
    }
  },
  data() {
    return {
      platform: null,
      close: true,
      clipboardValue: '',
      referrer: 0,
      copyContent: ''
    }
  },
  computed: {
    ...mapGetters([
      'playIndex'
    ])
  },
  watch: {
    show(val) {
      this.close = !val
    },
    appId(val) {
      // 处理剪切板内容
      const clipboardText = JSON.stringify({ tag: 'qifeng', app_id: val, uuid: getCookie('UUID') });
      this.copyContent = window.btoa(clipboardText);
    }
  },
  created() {
    // 获取当前客户端类型
    this.platform = getPlatform()

    /* 获取页面referrer */
    const referr = document.referrer;

    if (document.referrer && getQueryItem(referr, 'qid')) {
      this.referrer = getQueryItem(referr, 'qid')
    } else {
      console.log('当前页面暂无referrer！');
    }

    /* 生成UUID并存入待复制面板 */
    let uuid = null;
    if (getCookie('UUID')) {
      uuid = getCookie('UUID')
    } else {
      uuid = `clipboard-${new Date().getTime()}-${buildUUID()}`
      this.setCookie('UUID', uuid)
    }

    // 处理剪切板内容
    const clipboardText = JSON.stringify({ tag: 'qifeng', app_id: this.appId, uuid: uuid });
    this.copyContent = window.btoa(clipboardText);
  },
  methods: {
    /**
     * @method handleClose 关闭当前弹窗
     */
    handleClose() {
      this.$emit('close')
    },
    /**
     * @method handleInstallApp 点击安装app
     */
    handleInstallApp(url, e, code) {
      // 复制内容到剪切板
      const clipboard = new Clipboard(e.target, { text: () => code });

      clipboard.on('success', e => {
        // 释放内存
        clipboard.destroy();
      })
      clipboard.on('error', e => {
        clipboard.destroy();
      })

      clipboard.onClick(e);

      // 下载APP并上报下载信息
      const qid = !this.referrer ? getCookie('ad_click_id') : this.referrer;
      this.advertiseGameDownload(url, { app_id: this.appId, click_id: qid, uuid: getCookie('UUID') });
    }
  }
}
</script>

<style lang="scss" scoped>
.slide_fade-enter-active {
  transition: all .5s ease;
}

.slide_fade-leave-active {
  transition: all .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide_fade-enter, .slide_fade-leave-to {
  transform: translateY(340px);
  opacity: 0;
}
.download_masking {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
  background: #000000;
  opacity: 0.7;
}
.advertise_download_dialog {
  position: fixed;
  bottom: 0;
  background: white;
  width: 100%;
  height: 3.4rem;
  border-radius: .15rem .15rem 0 0;
  z-index: 999;
  padding: .5rem .9rem .4rem;
  &.block_ios {
    height: 2.8rem;
  }
  .app_container {
    text-align: center;
    & div {
      display: inline-block;
    }
    .ic_xiaokr {
      width: .65rem;
      height: .65rem;
    }
    .app_desc {
      width: 1.88rem;
      height: .25rem;
      line-height: .25rem;
      border-radius: .05rem;
      border: 1px dashed #979797;
      font-size: .13rem;
      color: #5E5E5E;
      margin-top: .19rem;
    }
    .game_gift {
      font-size: .2rem;
      color: #FDAD4A;
      font-weight: bold;
      margin-top: .08rem;
    }
    .btn_install {
      margin-top: .15rem;
      width: 1.74rem;
      height: .38rem;
      line-height: .38rem;
      background: linear-gradient(314deg, #12CDB0 0%, #01C7E0 100%);
      border-radius: .3rem;
      color: #ffffff;
      font-size: .15rem;
    }
    .install_guide {
      margin-top: .2rem;
      color: #919191;
      font-size: .13rem;
      line-height: .19rem;
      .color_orange {
        color: #FDAD4A;
      }
    }
  }
  .ad_icon_close {
    position: absolute;
    top: -.62rem;
    left: 50%;
    transform: translateX(-50%);
    width: .23rem;
    height: .7rem;
    background-image: url(../../assets/img/advertisement-download-dialog-close.png);
    background-size: cover;
  }
}
</style>